<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="css/cui.css"/>
    <link rel="stylesheet" href="css/lib.css"/>
    <link rel="stylesheet" href="css/style.css"/>
</head>
<body style="background: #fff;">

<!-- 头部 -->
<section id="hd">
    <div class="hdl"><a onclick="history.back()" class="a-back"></a></div>
    <h3>注 册</h3>
</section>
<!-- 头部 end-->

<!-- 主内容 -->
<section id="bd">
    <!--todo 表单验证-->
    <form action="">
        <div class="m-reg">
            <div class="inp"><input v-model="user.name" type="text" placeholder="个  人  姓  名"></div>
            <div class="inp"><input v-model="user.studentid" type="text" placeholder="学　　　　号"></div>
            <div class="inp"><input v-model="user.phone" type="text" placeholder="请输入手机号"></div>
            <div class="inp">
                <input class="input-code" v-model="user.validecode" type="text" placeholder="请输入验证码">
                <!-- 获取验证码 -->
                <input type="button" id="phone-btn" @click.stop="getCheckCode" value="获取手机验证码"/>
                <!-- 获取验证码 end-->
            </div>
            <div class="inp"><input v-model="user.password" type="password" placeholder="请输入登录密码"></div>
            <div class="inp"><input type="password" v-model="user.password2" placeholder="请重复输入密码"></div>
            <p class="p-agree">注册表示您已同意<a href="protocol.html">《体制在线用户协议》</a></p>
            <input class="m-btn3 m-btn3-1" type="submit" @click.prevent="submit" value="注　册">
            <p><a href="login.html">已有账号？直接登录</a></p>
        </div>
    </form>
    <div class="m-pop dn" id="sub-f">
        <div class="pop-bg"></div>
        <div class="inner" v-html="message">

        </div>
    </div>
</section>
<!-- 主内容 end-->


<!-- 弹出框:失败 -->

<!-- 弹出框:失败 end-->


<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="js/lib.js"></script>
<script src="http://cdn.bootcss.com/vue/2.2.6/vue.min.js"></script>
<script src="http://cdn.bootcss.com/axios/0.15.3/axios.min.js"></script>
<script src="js/axios-config.js"></script>
<script>
    var wait = 60;
    document.getElementById("phone-btn").disabled = false;
    function time(o) {
        if (wait == 0) {
            o.removeAttribute("disabled");
            //$(o).attr("disabled", false);  jquery
            o.value = "获取手机验证码";
            wait = 60;
        } else {
            o.setAttribute("disabled", true);
            o.value = wait + "秒后,重试";
            wait--;
            setTimeout(function () {
                    time(o)
                },
                1000)
        }
    }
    var form = new Vue({
        el: '#bd',
        data: {
            user: {
                name: '',
                studentid: '',
                phone: '',
                validecode: '',
                password: '',
                password2:''
            },
            message: ''
        },
        computed: {
            name: function () {
                return this.user.name.length > 1
            },
            phone: function () {
                return !!this.user.phone.trim().match(/^1\d{10}$/)
            },
            studentid:function () {
                return !!this.user.studentid.match(/\d{16}/)
            },
            password:function () {
                return this.user.password===this.user.password2&&this.user.password.length>5;
            },
            checkcode:function () {
                return this.user.validecode.length>4;
            }
        },
        methods: {
            submit: function () {
                if(!this.name){
                    this.tips('姓名不合法')
                }else{
                    if(!this.password){
                        this.tips('两次密码不一致')
                    }else{
                        if(!this.phone){
                            this.tips('请输入合法的手机号')
                        }else{
                            if(!this.studentid){
                                this.tips('请输入合法的学号')
                            }else{
                                var _ = this;
                                axios.student('/register', _.user)
                                    .then(function (res) {
                                        if (res.data.Code === 0) {
                                            location.href = "self.html"
                                        } else {
                                            _.tips(res.data.Data)
                                        }
                                    })
                            }
                        }
                    }
                }
            },
            getCheckCode: function () {
                if(!this.phone){
                    this.tips("手机号码不合法");
                    return false
                }else{
                    var _ = this;
                    axios.student('/applycode', {
                        phone: _.user.phone,
                        type: 1
                    }).then(function (res) {
                        if (res.data.Code === 0) {
                            _.tips('验证码已发送');
                            time()
                        } else {
                            _.tips('验证码发送失败')
                        }
                    })
                }
            },
            tips:function (e) {
                if (typeof e === 'undefined') {
                    this.message = '<p>您输入的信息有误</p><p>请重新输入</p>'
                } else {
                    this.message = e;
                }
                $('.m-pop,.pop-bg').show()
            }
        }
    })
</script>
</body>
</html>